<template>
  <div class="app-container">
    <FilterSearch :value="queryParams" :config="configData" :labelCol="8" :wrapperCol="16" layout="inline">
    </FilterSearch>
    <div class="main">
      <div class="table">
        <a-table :scroll="{ x: 1500 }" bordered :dataSource="tableData.dataSource" :columns="tableData.columns"
          :pagination="false" :loading="tableData.loading">
          <template #bodyCell="{ column, index, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="handleChange(record, 'details')">
                详情
              </a-button>
              <a-button type="link" @click="handleChange(record, 'edit')" v-if="record.signer == getUserId()">
                编辑
              </a-button>
              <a-button type="link" @click="handleChange(record, 'remove')" v-if="record.signer == getUserId()">
                删除
              </a-button>
            </template>
            <template v-if="column.key === 'index'">
              <span>
                {{ (index + 1) }}
              </span>
            </template>
            <template v-if="column.key === 'signer'">
              <span>
                {{ record.signerName }}
              </span>
            </template>
          </template>
        </a-table>
      </div>
      <div class="page">
        <a-pagination v-model:current="queryParams.pageNumber" :show-total="total => ` 总条数:${total}条`"
          v-model:pageSize="queryParams.pageSize" :total="tableData.total" @change="currentChange" />
      </div>
    </div>
    <a-modal v-model:open="modalOpen.open1" title="扫描枪" :maskClosable="false" :closable="false">
      <div class="modal-body">
        <div class="text">
          扫描枪扫到新数据,是否现在新建?
        </div>
      </div>
      <template #footer>
        <div class="modal-btns">
          <div class="modal-btn">
            <a-button @click="handleChange({}, 'scan')" type="primary">确认</a-button>
          </div>
          <div class="modal-btn">
            <a-button @click="cancel('scan')">关闭</a-button>
          </div>
        </div>
      </template>
    </a-modal>
    <div class="shade" v-show="spin">
      <a-spin size="large" />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { computed, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getList, downloadTable, deleteManage } from "@/api/commerExpress";
import { getUserInfo } from '@/api/login';
import { getUserId } from '@/utils/auth';
import { user as useUser } from "@/store";
import { downloadFile, formatDate } from "@/utils/index";
import { message } from 'ant-design-vue';
import { getQueryAll } from "@/api/common";

const user = useUser();
const router = useRouter();

const spin = ref(false);
const queryParams = ref({
  pageNumber: 1,
  pageSize: 10,
  startTimeAndEndTime: [formatDate(new Date()), formatDate(new Date())],
  startTime: "",
  endTime: ""
});
const typeOptions = reactive({
  options1: [],
  options2: []
});

const tableData = reactive({
  dataSource: [],
  columns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 80,
      align: 'center'
    },
    {
      title: '快递单号',
      dataIndex: 'expressNum',
      key: 'expressNum',
    },
    {
      title: '签收人',
      dataIndex: 'signer',
      key: 'signer'
    },
    {
      title: '签收时间',
      dataIndex: 'signTime',
      key: 'signTime'
    },
    {
      title: '操作',
      key: 'action',
      width: 160,
      fixed: 'right'
    },
  ],
  total: 0,
  loading: false
});
const modalOpen = reactive({
  open1: false
});
const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "dateRange",
        prop: "startTimeAndEndTime",
        valueFormat: "YYYY-MM-DD",
        allowClear: "关闭",
        label: "签收日期",
        placeholder: ["请选择", "请选择"],
      },
      {
        type: "input",
        prop: "expressNum",
        allowClear: "关闭",
        label: "快递单号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "contractNum",
        allowClear: "关闭",
        label: "合同编号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "carNum",
        allowClear: "关闭",
        label: "车架号",
        placeholder: "请输入",
      },
      {
        type: "select",
        prop: "state",
        allowClear: "关闭",
        label: "档案状态",
        placeholder: "请选择",
        optList: typeOptions.options1
      },
      {
        type: "input",
        prop: "caseNum",
        allowClear: "关闭",
        label: "盒号",
        placeholder: "请输入",
      },
      {
        type: "input",
        prop: "partNum",
        allowClear: "关闭",
        label: "件号",
        placeholder: "请输入",
      },
      {
        type: "select",
        prop: "materialType",
        allowClear: "关闭",
        label: "材料类型",
        placeholder: "请选择",
        optList: typeOptions.options2
      }
    ],
    operate: [
      {
        icon: "",
        type: "primary",
        name: "查询",
        handleClick: getLoad,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "重置",
        handleClick: reset,
        rule: true,
      },
      {
        icon: "",
        type: "primary",
        name: "导出",
        handleClick: exportExcel,
        rule: true,
      }
    ],
    rules: {

    },
  };
  return config;
});
function currentChange(pageNumber: number, pageSize: number) {
  queryParams.value.pageNumber = pageNumber;
  queryParams.value.pageSize = pageSize;
  getLoad();
}
function getLoad() {
  if (queryParams.value.startTimeAndEndTime != null && queryParams.value.startTimeAndEndTime.length > 0) {
    queryParams.value.startTime = queryParams.value.startTimeAndEndTime[0] + ' 00:00:00';
    queryParams.value.endTime = queryParams.value.startTimeAndEndTime[1] + ' 23:59:59';
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
  }
  tableData.loading = true;
  getList(queryParams.value).then(async (res: any) => {
    if ((queryParams.value.pageNumber * queryParams.value.pageSize) > res.total && res.total > 0 && queryParams.value.pageNumber > 1) {
      queryParams.value.pageNumber = 1;
      getLoad();
    } else {
      for (const key in res.records) {
        res.records[key]['signerName'] = await getUserInfo({ createGlobalUserId: res.records[key]['signer'] });
      }
      tableData.dataSource = res.records;
      tableData.total = res.total;
      tableData.loading = false;
    }
  });
}
function getOptionsList() {
  getQueryAll({ codeType: 'state' }).then((res: any) => {
    typeOptions.options1 = res;
  });
  getQueryAll({ codeType: 'materialType' }).then((res: any) => {
    typeOptions.options2 = res;
  });
}
function exportExcel() {
  if (queryParams.value.startTimeAndEndTime != null && queryParams.value.startTimeAndEndTime.length > 0) {
    queryParams.value.startTime = queryParams.value.startTimeAndEndTime[0] + ' 00:00:00';
    queryParams.value.endTime = queryParams.value.startTimeAndEndTime[1] + ' 23:59:59';
  } else {
    queryParams.value.startTime = "";
    queryParams.value.endTime = "";
    message.info('请选择签收日期');
    return;
  }
  spin.value = true;
  downloadTable({ ...queryParams.value, selectExpressVo: { ...queryParams.value } }).then((res: any) => {
    if (res) {
      downloadFile(res, "快递列表.xlsx");
    }
    spin.value = false;
  });
}
function handleChange(row: any = {}, type: string) {
  switch (type) {
    case 'details':
      user.setOrder(row).then((res: any) => {
        if (res) {
          router.push('/commerexpressinfo');
        }
      });
      break;
    case 'scan':
      router.push('/commerexpressadd');
      break;
    case 'edit':
      user.setOrder(row).then((res: any) => {
        if (res) {
          router.push('/commerexpressedit');
        }
      });
      break;
    case 'remove':
      deleteManage({ expressManageId: row.id }).then((res: any) => {
        if (res) {
          message.success('删除成功');
          getLoad();
        }
      })
      break;
    default:
      break;
  }
}
function cancel(type: string) {
  switch (type) {
    case "scan":
      modalOpen.open1 = false;
      break;
    default:
      break;
  }
}
function reset() {
  queryParams.value = {
    pageNumber: 1,
    pageSize: 10,
    startTimeAndEndTime: [],
    startTime: "",
    endTime: ""
  };
  getLoad();
}
getLoad();
getOptionsList();
</script>
<style lang='less' scoped></style>
